<template>
  <div>
    <table class="tableOne">
      <tr>
        <th class="columnStyle2">属性</th>
        <th class="columnStyle2">标志</th>
        <th class="columnStyle2">数值</th>
        <th class="columnStyle2">文本值</th>
        <th class="columnStyle2">备注</th>
        <th style="width: auto;">操作</th>
      </tr>
    </table>
    <div style="height: 600px;overflow-y: auto;">
      <table class="tableOne">
        <tr v-for="(item,index) in devParamsList" :key="index">
          <td class="columnStyle">
            <Input v-model="item.label" placeholder="属性名称" style="width: 100%"/>
          </td>
          <td class="columnStyle">
            <Input v-model="item.name" placeholder="属性标志" style="width: 100%"/>
          </td>
          <td class="columnStyle">
            <Input v-model="item.value" placeholder="属性数值" style="width: 100%"/>
            <!--           <InputNumber v-model="item.value" style="width: 100%;"></InputNumber>-->
          </td>
          <td class="columnStyle">
            <Input v-model="item.textValue" placeholder="属性文本值" style="width: 100%"/>
            <!--           <InputNumber v-model="item.value" style="width: 100%;"></InputNumber>-->
          </td>
          <td class="columnStyle">
            <Input v-model="item.remark" placeholder="备注·其他" style="width: 100%"/>
          </td>
          <!--<td style="width: 100px;text-align: center">-->
          <td style="width: auto;text-align: center">
            <Button type="error" @click="delRecord(index)">删除</Button>
          </td>
        </tr>
      </table>
      <Row style="margin-top: 5px;">
        <Button type="dashed" style="width: 100%;" @click="addNew">添加</Button>
      </Row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DevParams',
    mounted: function () {
    },
    data () {
      return {
        devParamsList: []
      }
    },
    methods: {
      addNew () {
        this.devParamsList.push({})
        console.log('addNew', this.devParamsList)
      },
      delRecord (index) {
        this.devParamsList.splice(index, 1)
      },
      refreshEditData (data) {
        this.devParamsList = data.devParams
      },
      makeDefault () {
        this.devParamsList = []
      }
    }
  }
</script>

<style scoped>
  .tableOne {
    width: 100%;
    border-spacing: 0px;
    table-layout: fixed;
  }

  table th,
  td {
    border: 1px solid #e9eaec;
    margin: 0;
    padding: 3px;
  }

  table tr {
    margin: 0;
  }

  .columnStyle {
    width: 300px;
    text-align: center;
  }
  .columnStyle2 {
    width: 300px;
  }
</style>
